<template>
  <div class="collect-set" v-loading="loading">
    <el-form :model="form" label-width="120px">
      <el-form-item label="表位" prop="tableVal">
        <el-select v-model="form.tableVal" placeholder="">
          <el-option
            :label="currentData.position"
            :value="currentData.position"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="表类型">
        <el-select v-model="form.tableType" placeholder="">
          <el-option :label="currentData.name" :value="currentData.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="波特率">
        <el-select v-model="form.baudRate" placeholder="">
          <el-option label="1200" value="1200" />
          <el-option label="2400" value="2400" />
          <el-option label="4800" value="4800" />
          <el-option label="9600" value="9600" />
          <el-option label="19200" value="19200" />
        </el-select>
      </el-form-item>
      <el-form-item label="校验位">
        <el-select v-model="form.meterCheck" placeholder="">
          <el-option label="无校验" value="1" />
          <el-option label="奇校验" value="2" />
          <el-option label="偶校验" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">设置参数</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { commSendInfo } from "@/api/source.js";

const props = defineProps({
  currentData: Object,
  // form: Object,
});
// do not use same name with ref
const form = reactive({
  tableVal: props.currentData.position,
  tableType: props.currentData.name,
  baudRate: "4800",
  meterCheck: "1",
});
const loading = ref(false);

onMounted(() => {
  watch(
    props,
    (newValue, oldValue) => {
      // console.log("wp1", newValue);
    },
    { immediate: true },
    { deep: true }
  );
});
const onSubmit = async () => {
  let parm = {
    meterCheck: form.meterCheck,
    baudRate: form.baudRate,
    pos: props.currentData.position,
  };
  loading.value = true;
  await commSendInfo(parm)
    .then((res) => {
      // console.log(res);
      loading.value = false;
      ElMessage({
        type: "success",
        message: "设置成功",
      });
    })
    .catch((err) => {
      console.log(err);
      loading.value = false;
      ElMessage({
        type: "warning",
        message: "设置失败",
      });
    });
};
</script>

<style lang="scss" scoped>
.collect-set {
  .el-form {
    .el-form-item {
      margin-bottom: 10px;
      .el-button {
        width: 120px;
      }
    }
  }
}
</style>
